<template>
  <div class="w-[750rpx] px-4">
    <!-- 头部标题 -->
    <div class="text-left py-6">
      <h1 class="text-sm font-bold text-[#333]">红娘</h1>
    </div>

    <!-- 卡片容器：红娘信息 -->
    <view class="card mb-4">
      <image :src="pic" class="w-full h-[300rpx] object-cover rounded-t-lg" mode="aspectFill"></image>
      <view class="p-4 bg-white">
        <p class="text-center text-[28rpx] font-semibold text-[#333]">老六</p>
      </view>
    </view>

    <!-- 按钮组 -->
    <view class="flex justify-around mb-6">
      <button class="matchmaker-btn primary">红娘电话</button>
      <button class="matchmaker-btn success">红娘微信</button>
      <button class="matchmaker-btn danger">在线咨询</button>
    </view>

    <!-- 卡片容器：红娘简介 -->
    <view class="card mb-4">
      <view class="p-4">
        <h2 class="text-sm font-medium text-[#333] mb-3">红娘简介</h2>
        <p class="text-sm leading-relaxed text-[#555]">
          资深红娘，专注婚恋服务10年，凭借敏锐的洞察力，精准匹配单身人士。
          至今已成功促成100对恋人牵手，用真诚与耐心全程陪伴，助力大家遇见美好爱情，迈向幸福人生！
        </p>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import pic from './kunkun.jpg'
</script>

<style lang="scss" scoped>
// 全局背景
::v-deep .w-\[750rpx\] {
  min-height: 100vh;
  background-color: #f5f7fa;
}

// 卡片通用样式
.card {
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #eaeaea;
}

// 按钮样式
.matchmaker-btn {
  width: 210rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 36rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: white;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}

.matchmaker-btn:active {
  transform: translateY(1rpx);
  opacity: 0.85;
}

.primary {
  background-color: #1890ff;
}

.success {
  background-color: #52c41a;
}

.danger {
  background-color: #ff4d4f;
}
</style>